Лучшие заметки «Дизайн Мании» за 2019 год — шаблоны, веб-дизайн, сервисы, вдохновение

В начале нового года есть смысл не только стоить планы на будущий, но и подводить итоги прошедшего. Именно поэтому каждый раз мы пишем статью с подборкой лучших заметок «Дизайн Мании» – можете почитать соответствующий дайджест за 2018 и пост за 2017. Многие из имеющихся там публикаций (для вдохновения, скачивания разных дизайнерских материалов и т.п.) все еще актуальны.

Записи сгруппированы в отдельные тематические блоки чтобы удобнее было воспринимать информацию. Они полностью совпадают с разделами блога. Побить прошлогодний рекорд с 55-тью размещенными статьями, вряд ли, получится, т.к. времени проекту в 2019 уделялось чуть меньше… но ведь и качество контента важнее количества.

Веб-дизайн и создание сайтов

Все про подвал сайта (footer) — рекомендации как лучше его сделать, зачем он нужен + 10 вариантов оформления футера с пояснением их преимуществ и плюсов.
Эффективны Hero Image для вебсайта — 8 советов по созданию данного элемента страницы дабы он получился максимально полезным для пользователей.
Виды кнопок в пользовательском интерфейсе — какие вообще могут быть кнопки в приложениях и на веб-проектах (текстовая, гамбургер, выпадающая, призрачная, социальная и т.п.), в чем их основные особенности и полезные стороны.
Идеальная форма логина — рассмотрели, как не следует делать при разработке онлайн формы авторизации (чтобы ваши посетители оставались довольными). Например, крайне не желательно делить процесс логина на несколько этапов/шагов.
Вертикальный текст в веб-дизайне — в статье приведены примеры использования этой техники и описаны ее преимущества в тех или иных случаях.
Эффективные B2B-сайты — 10 реальных вебсайтов с пояснениями соответствующих дизайнерских решений, скриншотами и советами какие подходы лучше применять для B2B-проектов.
Mailto ссылка на сайте — практическая заметка о том, как сделать линк на адрес электронной почты + парочка лайфхаков по верстке.

Логотипы

Отрицательное пространство в логотипах — несколько простых техник как можно использовать этот прием в дизайне лого + картинки с удачными реализациями.
Японские и китайские логотипы — более 45-ти оригинальных и красивых примеров + размышления по теме.
Спортивные логотипы — 60 вариантов лого для футбольных, баскетбольных, хоккейных и других команд. Если создаете что-то подобное, советуем глянуть.

Материалы для скачивания

Тут традиционно будет несколько подрубрик, однако сначала хотим поделиться одним крутым обзором:

Подписка MonsterONE от TemplateMonster — данная платная подписка предоставляет неограниченный доступ к более чем 11500+ премиальным материалам: начиная от шаблонов, плагинов, заканчивая разной графикой в виде мокапов, иллюстраций, паттернов и даже стоковых фото. Платите единожды — используете целый год или получаете доступ навсегда.

Шаблоны

Woostroid2 — детальный обзор премиального универсального макета для создания топовых онлайн-магазинов. Здесь рассмотрены все возможности по дизайну и функциональности (т.е. включенные в стоимость плагины). Как и Monsroid2, крутой продукт, только заточенный под eCommerce нишу.
HTML5 шаблоны для сайтов — 30+ классных адаптивных дизайнов для ваших веб-ресурсов, сделанных с помощью HTML5-технологии. В посте представлены как бесплатные, так и платные варианты, чтобы каждый смог найти подходящий на свой вкус и бюджет.
Топовые макеты Magento — они больше подходят не для обычных вебсайтов, а скорее для онлайн-магазинов, т.к. в каждом есть каталог товаров, корзина и т.п. Всего публикация содержит 30 тем.
20 адаптивных русских HTML шаблонов — здесь чуть меньше материалов нежели в предыдущих постах, но отличительная их черта в том, что все они имеют русскоязычную локализацию, т.е. вам не придется добавлять перевод. Не забывайте, что HTML-темы не включают в себя CMS-движок.
20+ плагинов и шаблонов Elementor — если вы используете данный модуль конструктора страниц для WordPress, то готовые дизайны/плагины однозначно пригодятся в работе.

Кисти

Кисти сердечки для Фотошопа — тут найдете более 50-ти тематических наборов, которые можно использовать для графики ко дню святого Валентина или любых других романтических картинок.
Кисти для рисунка мелом на доске — у нас когда-то была аналогичная заметка про шрифты мелом, а теперь добавили еще и с кисточками. Последние, разумеется, подходят не для текстов, а используются при рисовании — содержат как абстрактные варианты, так и наборы с конкретными объектами.
Кисти листья для Фотошопа — пригодятся при создании каких-то природных иллюстраций. Среди материалов встречаются и отдельные листочки, и небольшие композиции.

Иконки

Телефоны и смартфоны — 25+ абсолютно разных по содержанию наборов: есть полностью детализированные копии реальных устройств; просто тематические иконки; красочные и наоборот моногромные картинки.
Почтовые иконки — запись включает в себя изображения с конвертами, письмами, email’ами и тому подобными вещами. Всего 25 архивов + ссылки на сервисы, где сможете найти их еще больше.

Текстуры

Черные текстуры для Photoshop — каким-то немыслимым образом нам удалось подобрать около 60-ти реально красивых и необычных материалов. Раньше, кстати, уже были белые текстуры, возможно в 2020 выберем для себя еще один цвет.
Бесшовные текстуры цветов — тут имеются классические паттерны для Фотошоп и векторные файлы — всего 50 наборов. Выглядят все они приятно и мило.

Разное

Мокапы MacBook в PSD — собрали 30+ бесплатных макетов/шаблонов в формате PSD, где в изображение экрана компьютера сможете вставить свою фотку/картинку.
Бандлы для дизайнеров-фрилансеров — статья включает 20 всевозможных дизайнерских заготовок/макетов, использование которые упрощающих работу.

Для вдохновения: дизайны сайтов, фотки, обои

Как и в прошлом «инфоблоке», тут представлено сразу несколько тем, но мы не будем разделять их на подкатегории.

40+ примеров Hero Image в веб-дизайне — этот пост своего рода дополнение к похожей статье про эффективное использование крупных картинок в шапке главной страницы. В нем увидите применение всех актуальных методов на практике.
Красивые формы логина — еще одна практическая демонстрация к написанной ранее заметке на схожую тему. Однако здесь кроме скриншотов дизайнов есть и готовые HTML/PSD исходники с полноценными работающими формами.
Использование иллюстраций для сайтов — все 35 примера оформления веб-проектов из публикации сгруппированы в несколько стилистических жанров: рисованные от руки, акварельные, 3D, градиентные и т.п. По каждому из них есть небольшое описание.
60+ рисованных веб-дизайнов — в отличии от предыдущей ссылки тут только изображения/скриншоты веб-ресурсов, где активно используются всевозможные рисунки и иллюстрации.
Скандинавские цвета и стиль для сайтов — эти 60+ творений веб-дизайнеров помогут хорошо прочувствовать и понять основные тренды и тенденции данной ниши.
Лучшие черно-белые фотографии — в заметке будет более 50-ти мега эмоциональных, ярких, тонких, чувственных фотокадра. Ч/б стилистика — это что-то необычное.
Иллюстрации от Hannah Davies — жаль, что в 2019 получилось сделать всего одну статью с подборкой работ каких-то художников, т.к. на самом деле это очень интересный формат. Здесь по графике с красивыми природными узорами очень хорошо заметен почерк автора.
Рождественские и новогодние обои — 45+ классных тематических картинок на рабочий стол, пост был опубликован как раз перед новогодними праздниками.
35+ WordPress Wallpapers — практически все ссылки на источники в прошлой версии заметки были утеряны, поэтому в срочном порядке пришлось ее переписать.

Полезные программы и подборки инструментов

Лучшие дизайн-плагины в Google Chrome — выбрали для вас топ-10 полезных приложений: определение цвета/шрифта, инструменты для SVG, вдохновения, скриншотов.
Обработка фотографий в Movavi — наглядно с картинками рассмотрели парочку задач в этом ПО: ретуширование, удаление объектов, улучшение фото.
Полезные веб-сервисы дизайнеру №14 — размеры экрана, конструктор лендинга, генераторы и не только.
Интересные дизайнерские веб-проекты №13 — скачивание и компрессия PNG изображений, иконки, подбор шрифтов + JavaScript библиотека.
Полезное дизайнерам и разрабочикам №12 — создание эмоджи, иконки, палитры, несколько скриптов для слайдшоу, слайдера.

Онлайн сервисы для дизайнеров

Разные инструменты для UX/UI дизайна — краткий обзор таких проектов и площадок как UXPin, Mason, Interfacer и Webflow.
Сервисы убирающие фон на картинке — если перед вами стоит подобное задание, то приложения, описанные в статье, смогут пригодиться.
Canva для презентаций — пошаговая инструкция и советы как сделать в сервисе Canva полноценную презентацию и даже сохранить ее в PowerPoint.
Калькулятор для сайта stepFORM — веб-ресурс позволяет создать онлайн калькулятор или форму для своего сайта без знаний программирования.
Canvas Chrome для рисования — приложение не имеет ничего общего с предыдущим одноименным сервисом, оно дает возможность рисовать непосредственно в Google Chrome, Firefox и др., а следовательно на планшетах и ПК. В принципе, прикольно.
MixaPixa — помогает создавать крутые анимированные gif/html5 баннеры и промо-ролики без сложных программ по типу After Effects.

Для шрифтов

Онлайн сервисы распознавания шрифтов — рассмотрели все топовые инструменты в данной нише: есть софт, распознающий по картинке/тексту, расширения для браузеров.
Font Combination Tool — позволяет легко и быстро находить красивые комбинации фонтов для типографики вебсайта (кроме обзора найдете 10 примеров удачных комбинаций).
FontDrop — загружаете в специальную форму любой шрифт и сможете просмотреть всю информацию о нем + имеющийся внутри него набор символов.

Итого. В дайджесте получилось 48 статей, что, как и предполагалось, меньше прошлогоднего результата. Придется теперь в 2020 наверстывать упущенное. Если посмотреть на тематику публикаций, то в прошлом году было слишком мало постов с наборами иконок, также уменьшились объемы по теме фотографии или логотипам, остальные материалы — плюс-минус остались на том же уровне.

Кстати, пишите ниже, о чем вам бы хотелось почитать, и мы постараемся учесть ваши пожелания в дальнейшем.